<template>
  <div id="customer_details">
    <el-button type="text" @click="back">返回</el-button>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-row class="demo-avatar demo-basic">
          <el-col :span="12">
            <div class="demo-basic--circle">
              <div class="block"><el-avatar :size="150" :src="circleUrl" />
                <div v-for="item in detailslist" :key="item.realname">
                  {{ item.realname }}
                </div>
                <div>海纳百川，有容乃大！</div>
              </div>
            </div>
          </el-col>
        </el-row>
        联系方式：<span v-for="item in detailslist" :key="item.telephone">{{ item.telephone }}</span><br>
        状态：<span v-for="item in detailslist" :key="item.status">{{ item.status }}</span><br>
        地址：<span v-for="item in detailslist" :key="item.city">{{ item.province }}&nbsp;{{ item.city }}</span>
      </el-tab-pane>
      <el-tab-pane label="订单信息" name="second">
        <customertable ref="msg" />
      </el-tab-pane>
      <el-tab-pane label="服务地址" name="third">地址管理</el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
import qs from 'querystring'
import customertable from './table'

export default {
  // 注入子组件
  components: {
    customertable
  },
  data() {
    return {
      activeName: 'first',
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      detailslist: []
    }
  },
  created() {
    this.baseDetails()
  },
  mounted() {
    // this.$refs.msg[1].findcustomerId(this.activeName);
  },
  methods: {
    // 返回上一页面
    back() {
      this.$router.back()
    },
    handleClick(tab, event) {
      console.log(this.$refs)
      // this.$refs.msg[tab.index].findcustomerId(this.activeName);
    },
    baseDetails() {
      var id = this.$route.query.id
      // console.log(id);
      this.$axios.get('/customer/findCustomerById', { params: { id }}).then(response => {
        this.detailslist = response.data
        // let detailsnew = JSON.parse(JSON.stringify(this.detailslist));
        console.log(this.detailslist)
      })
    }
  }
}
</script>
<style scoped>
#customer_details{
  margin-left: 20px;
  margin-top: 10px;
  line-height: 50px;
}
.block{
  margin-left: 100px;
}
.el-tab-pane :nth-child(2){
  line-height: 2px;
}
</style>
